Chart
Type
widget
Summary
This widget displays data in the form of charts.
Description
The Chart widget is a wrapper for Chart.js v3.7.0 in LiveCode. It allows you to create beautiful and highly customizable charts, in a simple way. Data can be displayed as a line graph, bar chart, radar chart, donut/pie chart, polar chart, bubble chart or scatter plot.
Compatibility and Support
OS
mac
windows
linux
ios
android
web
Children Properties
Property
| Name | Summary | Syntax |
|---|---|---|
| titlePadding | Padding to apply around the title. | set the titlePadding of widget to <integer> get the titlePadding of widget |
| legendAlign | Alignment of the Legend | set the legendAlign of widget to {"start" | "center" | "end"} get the legendAlign of widget |
| csvData | Gets or sets the data to display the chart in CSV format | set the csvData of widget to <CSV Data> get the csvData of widget |
| chartJSONData | Gets or sets the data to display the chart in JSON format | set the chartJSONData of widget to <JSON string> get the chartJSONData of widget |
| datasetLabels | label showing each data set | set the DatasetLabels of widget to <Labels> get the DatasetLabels of widget |
| subtitleAlign | Alignment of the subtitle | set the subtitleAlign of widget to {"start" | "center" | "end"} get the subtitleAlign of widget |
| titleFullSize | Point out that the title box should occupy the entire width/height of box. | set the titleFullSize of widget to {true | false} get the titleFullSize of widget |
| title | Specifies the string to display as the title of the chart. | get the title of <widget> set the title of <widget> to <pTitle> |
| chartJSONOptions | Gets or sets options for displaying the chart in JSON format | set the chartJSONOptions of widget to <JSON string options> get the chartJSONOptions of widget |
| legendTextColor | The text color of the chart's legend | set the legendTextColor of widget to {"RGBA"} get the legendTextColor of widget |
| subtitlePadding | Padding to apply around the subtitle. | set the subtitlePadding of widget to <integer> get the subtitlePadding of widget |
| showTitle | Specifies whether title of the chart is displayed. | set the showTitle of widget to {true | false} get the showTitle of widget |
| subtitleFullSize | Point out that the subtitle box should occupy the entire width/height of box. | set the subtitleFullSize of widget to {true | false} get the subtitleFullSize of widget |
| subtitleFont | Specifies the font face of text in the subtitle of chart. | set the subtitleFont of widget to fontName get the subtitleFont of widget |
| titleFontLineHeight | Determines the height of the title line. | set the titleFontLineHeight of widget to {"normal" | "inherit" | "initial" | "revert" | "unset" | number [ em | % ]} get the titleFontLineHeight of widget |
| subtitle | Specifies the string to display as the subtitle of the chart. | set the subtitle of widget to subtitleString |
| colorSetNames | Names of color sets | get the colorSetNames of widget |
| lineTension | determines whether line charts are drawn curved or not. | set the lineTension of widget to <number> get the lineTension of widget |
| pointStyle | The styles of the points that are drawn on the charts. | set the pointStyle of widget to {circle | cross | crossRot | dash | line | rect | rectRounded | rectRot | star | triangle} get the pointStyle of widget |
| subtitleFontLineHeight | Determines the height of the subtitle line. | set the subtitleFontLineHeight of widget to {"normal" | "inherit" | "initial" | "revert" | "unset" | number [ em | % ]} get the subtitleFontLineHeight of widget |
| titlePosition | The position of the chart's title | set the titlePosition of widget to {"top" | "left" | "bottom" | "right"} get the titlePosition of widget |
| titleFontSize | Specifies the point size of text displayed in title | set the titleFontSize of widget to <pointSize> get the titleFontSize of widget |
| titleFont | Specifies the font face of text in the title of chart. | set the textFont of widget to fontName get the textFont of widget |
| chartBackgroundColor | Specifies an chart background color. | set the chartBackgroundColor of widget to {RGB | RGBA} get the chartBackgroundColor of widget |
| scaleXBorderDash | Length and spacing of dashes on the x-axis line. | set the scaleXBorderDash of widget to pixelsOn [, pixelsOff] get the scaleXBorderDash of widget |
| showLegend | Specifies whether legend of the chart is displayed. | set the showLegend of widget to {true | false} get the showLegend of widget |
| titleColor | Specify a color for the title text | set the titleColor of widget to {Color RGB | Color RGBA} get the titleColor of widget |
| subtitleFontStyle | Specify the appearance of the subtitle text | set the subtitleFontStyle of widget to {"normal" | "italic" | "oblique" | "initial" | "inherit"} get the subtitleFontStyle of widget |
| showSubtitle | Specifies whether subtitle of the chart is displayed. | set the showSubtitle of widget to {true | false} get the showSubtitle of widget |
| titleFontStyle | Specify the appearance of the banner text | set the titleFontStyle of widget to {"normal" | "italic" | "oblique" | "initial" | "inherit"} get the titleFontStyle of widget |
| chartType | This property defines the type of chart to be displayed | set the chartType of widget to { line | bar | radar | donut | foot | polar | bubble | scatter } get the chartType of widget |
| maxXScale | the maximum value that the scale can take on the x-axis | set the maxXScale of widget to <number> get the maxXScale of widget |
| lineBorderDash | Length and spacing of the dashes in the line of the line chart. | set the lineBorderDash of widget to pixelsOn [, pixelsOff] get the lineBorderDash of widget |
| subtitleColor | Specify a color for the subtitle text | set the subtitleColor of widget to {Color RGB | Color RGBA} get the subtitleColor of widget |
| scaleYStacked | Stack the data on the y-axis | set the scaleYStacked of widget to {ture | false} get the scaleYStacked of widget |
| colorSet | Default color styles with which the chart is drawn. | set the Colorset of widget to <Colorset name> get the Colorset of widget |
| backgroundDataColors | The background color of the data sets | set the backgroundDataColors of widget to {RGB | RGBA} get the backgroundDataColors of widget |
| maxYScale | the maximum value that the scale can take on the y-axis | set the maxYScale of widget to <number> get the maxYScale of widget |
| lockChartUpdates | Block the update of the chart when changing its properties. | set the lockChartUpdates of widget to {true | false} get the lockChartUpdates of widget |
| scaleXStacked | Stack the data on the x-axis | set the scaleXStacked of widget to {ture | false} get the scaleXStacked of widget |
| pointRadius | The radius of the points that are drawn on the charts. | set the pointRadius of widget to <number> get the pointRadius of widget |
| dataBorderColor | dataset border color | set the dataBorderColor of widget to {RGB | RGBA} get the dataBorderColor of widget |
| showXScale | hides and shows the scale on the x-axis | set the showXScale of widget to {ture | false} get the showXScale of widget |
| dataLabels | Gets or sets the labels for each dataset | set the dataLabels of widget to {label 1,label 2, ...} get the dataLabels of widget |
| minYScale | the minimum value that the scale can take on the y-axis | set the minYScale of widget to <number> get the minYScale of widget |
| dataBorderWidth | dataset border width | set the dataBorderWidth of widget to <integer> get the dataBorderWidth of widget |
| subtitlePosition | The position of the chart's subtitle | set the subtitlePosition of widget to {"top" | "left" | "bottom" | "right"} get the subtitlePosition of widget |
| legendUsePointStyle | Shows the style of the points in the legend. | set the legendUsePointStyle of widget to {true | false} get the legendUsePointStyle of widget |
| minXScale | the minimum value that the scale can take on the x-axis | set the minXScale of widget to <number> get the minXScale of widget |
| titleFontWeight | This property sets the weight (or bold) of the title font. | set the titleFontWeight of widget to {"normal" | "bold" | "lighter" | "bolder" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "inherit" | "initial" | "revert" | "unset"} get the titleFontWeight of widget |
| enableToolTip | Enable or disable chart tooltips. | set the enableToolTip of widget to {true | false} get the enableToolTip of widget |
| titleAlign | Alignment of the title | set the titleAlign of widget to {"start" | "center" | "end"} get the titleAlign of widget |
| indexAxis | Sets the major axis for charts that use the Cartesian coordinate system. | set the indexAxis of widget to {"x" | "y"} get the indexAxis of widget |
| scaleXTextSize | the size of the text in x-axis scale | set the scaleXTextSize of widget to <integer> get the scaleXTextSize of widget |
| scalesTextColor | scales text color | set the scalesTextColor of widget to {RGB | RGBA} get the scalesTextColor of widget |
| showYScale | hides and shows the scale on the y-axis | set the showYScale of widget to {ture | false} get the showYScale of widget |
| subtitleFontSize | Specifies the point size of text displayed in subtitle | set the subtitleFontSize of widget to pointSize get the subtitleFontSize of widget |
| scaleYTextSize | the size of the text in y-axis scale | set the scaleYTextSize of widget to <integer> get the scaleYTextSize of widget |
| enableAnimations | Enable and disable animations in chart | set the enableAnimations of widget to {true | false} get the enableAnimations of widget |
| scaleYBorderDash | Length and spacing of dashes on the y-axis line. | set the scaleYBorderDash of widget to pixelsOn [, pixelsOff] get the scaleYBorderDash of widget |
| subtitleFontWeight | This property sets the weight (or bold) of the subtitle font. | set the subtitleFontWeight of widget to {"normal" | "bold" | "lighter" | "bolder" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "inherit" | "initial" | "revert" | "unset"} get the subtitleFontWeight of widget |
| legendPosition | The position of the chart's legend | set the legendPosition of widget to {"top" | "left" | "bottom" | "right"} get the legendPosition of widget |
| gridLineColor | The color of chart grid lines | set the gridLineColor of widget to {RGB | RGBA} get the gridLineColor of widget |
| tsvData | Gets or sets the data to display the chart in TSV format | set the tsvData of widget to <TSV Data> get the tsvData of widget |